<template>
	<view>
		<!-- 入住时间 -->
		<view class="check-in">
			<view>入住03月19日</view>
			<view>共1晚</view>
			<view>离开03月20日</view>
		</view>
		<view class="item-box">
			<view class="left">标准双床</view>
		</view>
		<view class="item-box">
			<view class="left">入住时间：</view>
			<view class="right">下午14:00后，离店时间：12:00以前</view>
		</view>
		<view class="item-box">
			<view class="left">住客姓名：</view>
			<view class="right">住客姓名：张三</view>
		</view>
		<view class="item-box">
			<view class="left">手机号：</view>
			<view class="right">13621705868</view>
		</view>
		<view class="item-box">
			<view class="left">共计：</view>
			<view class="right price">¥200</view>
		</view>
		<!-- 提交按钮 -->
		<view class="placeorder">提交订单</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
	.check-in{
		width: 750rpx;
		height: 90rpx;
		background: #FFF5EC;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.item-box{
		width: 690rpx;
		height: 97rpx;
		line-height: 97rpx;
		border-bottom: 1px solid #ECECEC;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
	.left{
		width: 150rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}
	.right{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	.price{
		font-size: 32rpx;
		font-weight: bold;
		color: #F09238;
	}
	.placeorder{
		margin: 80rpx 30rpx;
		width: 690rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		border-radius: 35rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		text-align: center;
		color: #FFFFFF;
	}
</style>
